<script lang="ts" setup>
import {onMounted, reactive, ref, type UnwrapRef} from 'vue';
import {useRoute} from "vue-router";
import {CopyOutlined, UserOutlined} from "@ant-design/icons-vue";
import dayjs, {type Dayjs} from "dayjs";
import {getInterviewByIdAPI, updateInterviewAPI} from "@/apis/interview.ts";
import type {Rule} from "ant-design-vue/es/form";
import {message} from "ant-design-vue";

//表单数据
interface FormState {
  interviewId: string
  interviewStatus: string
  interviewType: string
  interviewLink: string
  interviewStartTime: Dayjs | null|string
  interviewEndTime: Dayjs | null|string
  interviewRemarks: string

  jobTitle: string
  jobDescription: string
  jobRequirements: string
  jobLocation: string
  jobType: string
  jobSalary: string
  jobSalaryType: string
  jobWorkingHours: string
  jobStartDate: string
  jobEndDate: string

  resumeId: string;
  resumeJobseekerId: string;
  resumeAvatar: string;
  resumeUsername: string;
  resumeGender: string;
  resumeAge: number | undefined;
  resumePhone: string;
  resumeAddress: string;
  resumeEducationSchool: string;
  resumeEducationMajor: string;
  resumeEducationDegree: string;
  resumeSchoolExperience: string;
  resumeEducationEndDate: Dayjs | undefined;
  resumeWorkExperience: string;
  resumeSkillDescription: string;
  resumeCertificates: string;
  resumePersonalProfile: string;
  resumeExpectedJob: string;
  resumeExpectedWorkAddress: string;
  resumeExpectedSalary: number | undefined;
  resumeExpectedSalaryType: string;
  interviewValue: [Dayjs | null, Dayjs | null];
}

const formState: UnwrapRef<FormState> = reactive({
  interviewId: '',
  interviewStatus: '',
  interviewType: '',
  interviewLink: '',
  interviewStartTime: null,
  interviewEndTime: null,
  interviewRemarks: '',

  jobTitle: '',
  jobDescription: '',
  jobRequirements: '',
  jobLocation: '',
  jobType: '',
  jobSalary: '',
  jobSalaryType: '',
  jobWorkingHours: '',
  jobStartDate: '',
  jobEndDate: '',

  resumeId: "",
  resumeJobseekerId: "",
  resumeAvatar: "",
  resumeUsername: "",
  resumeGender: "",
  resumeAge: undefined,
  resumePhone: "",
  resumeAddress: "",
  resumeEducationSchool: "",
  resumeEducationMajor: "",
  resumeEducationDegree: "",
  resumeSchoolExperience: "",
  resumeEducationEndDate: undefined,
  resumeWorkExperience: "",
  resumeSkillDescription: "",
  resumeCertificates: "",
  resumePersonalProfile: "",
  resumeExpectedJob: "",
  resumeExpectedWorkAddress: "",
  resumeExpectedSalary: undefined,
  resumeExpectedSalaryType: "",
  interviewValue: [null, null],
});


//接收参数
const route = useRoute();
//生命周期
onMounted(() => {
  formState.interviewId = route.params.interviewId as string;
  getInterviewDetail()
})
const imageUrl = ref<string>('');
//获取岗位信息
const getInterviewDetail = async () => {
  getInterviewByIdAPI({
    interviewId: formState.interviewId,
    checkType: 'employer'
  }).then((res) => {
    if (res.data.flag) {
      formState.interviewId = res.data.data.interviewId;
      formState.interviewStatus = res.data.data.interviewStatus;
      formState.interviewType = res.data.data.interviewType;
      formState.interviewLink = res.data.data.interviewLink;
      formState.interviewStartTime = dayjs(res.data.data.interviewStartTime).format('YYYY-MM-DD-HH:mm:ss');
      formState.interviewEndTime = dayjs(res.data.data.interviewEndTime).format('YYYY-MM-DD-HH:mm:ss');
      formState.interviewRemarks = res.data.data.interviewRemarks;
      // 处理工作面试时间数据回显
      formState.interviewValue = [
        dayjs(res.data.data.interviewStartTime),
        dayjs(res.data.data.interviewEndTime)
      ];

      formState.jobTitle = res.data.data.jobTitle
      formState.jobType = res.data.data.jobType
      formState.jobSalary = res.data.data.jobSalary
      formState.jobSalaryType = res.data.data.jobSalaryType
      formState.jobWorkingHours = res.data.data.jobWorkingHours
      formState.jobDescription = res.data.data.jobDescription
      formState.jobRequirements = res.data.data.jobRequirements
      formState.jobLocation = res.data.data.jobLocation
      formState.jobStartDate = dayjs(res.data.data.jobStartDate).format('YYYY-MM-DD-HH:mm:ss')
      formState.jobEndDate = dayjs(res.data.data.jobEndDate).format('YYYY-MM-DD-HH:mm:ss')


      formState.resumeAvatar = res.data.data.resumeAvatar;
      formState.resumeUsername = res.data.data.resumeUsername;
      formState.resumeGender = res.data.data.resumeGender;
      formState.resumeAge = res.data.data.resumeAge;
      formState.resumePhone = res.data.data.resumePhone;
      formState.resumeAddress = res.data.data.resumeAddress;
      formState.resumeEducationSchool = res.data.data.resumeEducationSchool;
      formState.resumeEducationMajor = res.data.data.resumeEducationMajor;
      formState.resumeEducationDegree = res.data.data.resumeEducationDegree;
      formState.resumeSchoolExperience = res.data.data.resumeSchoolExperience;
      formState.resumeEducationEndDate = dayjs(res.data.data.resumeEducationEndDate);
      formState.resumeSkillDescription = res.data.data.resumeSkillDescription;
      formState.resumeWorkExperience = res.data.data.resumeWorkExperience;
      formState.resumeSkillDescription = res.data.data.resumeSkillDescription;
      formState.resumeCertificates = res.data.data.resumeCertificates;
      formState.resumePersonalProfile = res.data.data.resumePersonalProfile;
      formState.resumeExpectedJob = res.data.data.resumeExpectedJob;
      formState.resumeExpectedWorkAddress = res.data.data.resumeExpectedWorkAddress;
      formState.resumeExpectedSalary = res.data.data.resumeExpectedSalary;
      formState.resumeExpectedSalaryType = res.data.data.resumeExpectedSalaryType;

      //获取头像
      if (formState.resumeAvatar !== null) {
        imageUrl.value = "http://localhost:8080/image/download?name=" + formState.resumeAvatar;
      }

    }
  })
}

//通过-发出面试邀请
const open = ref<boolean>(false);
const showModal = () => {
  open.value = true;
};

const handleOk = () => {
  onSubmit()
};
//面试数据类型
type RangeValue = [Dayjs | null, Dayjs | null];
const interviewValue = ref<RangeValue>();
// 可以添加方法来处理日期选择后的数据同步等逻辑，比如：
const handleDateChange = (dates: RangeValue) => {
  formState.interviewStartTime = dates[0];
  formState.interviewEndTime = dates[1];
  console.log('dates', dates)
};
const formRef = ref();
const onSubmit = () => {
  formRef.value
      .validate()
      .then(async () => {
        handleDateChange(formState.interviewValue)
        //修改面试
        updateInterviewAPI({
          interviewId: formState.interviewId,//面试id
          interviewStatus: formState.interviewStatus,//状态
          interviewType: formState.interviewType,//面试类型
          interviewStartTime: formState.interviewStartTime,//面试开始时间
          interviewEndTime: formState.interviewEndTime,//面试结束时间
          interviewLink: formState.interviewLink,//面试链接
          interviewRemarks: formState.interviewRemarks,//备注，补充信息
        }).then((res) => {
          if (res.data.flag) {
            getInterviewDetail()
            message.success('修改成功')
          } else {
            message.error('修改失败')
          }
          open.value = false;
        })
      })
      .catch((error: any) => {
        console.log('error', error);
      });
};

const rules: Record<string, Rule[]> = {
  interviewType: [
    {required: true, message: '请选择面试方式', trigger: 'change'},
  ],
  interviewLink: [
    {required: true, message: '请输入面试电话/微信/会议号/地点等等', trigger: 'change'},
  ],
  interviewValue: [
    {type: 'array' as const, required: true, message: '请选择面试时间!'},
    {
      validator: (_, value) => {
        if (!value || value.length === 0) {
          return Promise.reject('请选择面试时间');
        }
        const hasNull = value.some((item: any) => item === null);
        if (hasNull) {
          return Promise.reject('请选择面试时间');
        }
        return Promise.resolve();
      },
      trigger: 'change'
    }]
};

</script>
<template>
  <div class="jobAndEmployerDetail">
    <div class="top">
      <a-page-header
          sub-title="投递列表"
          title="返回"
          @back="() => $router.go(-1)"
      />
    </div>
    <div class="main">
      <div class="job">
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">面试-信息</a-divider>
        <a-descriptions :title="'面试类型 : &nbsp&nbsp '+formState.interviewType">
          <a-descriptions-item label="状态">{{ formState.interviewStatus }}</a-descriptions-item>
          <a-descriptions-item :span="2" label="链接">{{ formState.interviewLink }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="面试时间">
            {{ formState.interviewStartTime }} ~~~~~~~~~ {{ formState.interviewEndTime }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="补充信息">
            {{ formState.interviewRemarks }}
          </a-descriptions-item>
        </a-descriptions>

        <div class="check-button">

          <a-modal v-model:open="open" :title="'编辑-'+formState.resumeUsername+'的面试！'" cancelText="取消"
                   okText="确认" @ok="handleOk">
            <a-form
                ref="formRef"
                :model="formState"
                :rules="rules"
            >
              <div style="
              border: 1px solid red;
              border-radius: 20px;
              display: flex;
              align-items: center;
              justify-items: center;
              flex-direction: column;">
                <a-divider orientation="center" style="color:#4D7181; font-size: 20px">面试-信息</a-divider>
                <a-form-item ref="interviewType" label="面试类型" name="interviewType">
                  <a-select v-model:value="formState.interviewType" style="width: 350px;">
                    <a-select-option value="电话面试">电话面试</a-select-option>
                    <a-select-option value="微信面试">微信面试</a-select-option>
                    <a-select-option value="腾讯会议">腾讯会议</a-select-option>
                    <a-select-option value="线下面试">线下面试</a-select-option>
                    <a-select-option value="其他会议">其他面试</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item ref="interviewLink" label="面试链接" name="interviewLink">
                  <a-input v-model:value="formState.interviewLink" placeholder="电话/微信/会议号/地点等等"
                           style="width: 350px;"/>
                </a-form-item>
                <a-form-item ref="interviewValue" label="面试时间" name="interviewValue">
                  <a-range-picker v-model:value="formState.interviewValue" show-time style="width: 350px;"/>
                </a-form-item>
                <a-form-item ref="interviewRemarks" label="补充信息"
                             name="interviewRemarks">
                  <a-textarea v-model:value="formState.interviewRemarks"
                              :auto-size="{minRows: 4, maxRows: 10}"
                              :maxlength="300"
                              show-count
                              style="width: 360px"
                  />
                </a-form-item>
              </div>
            </a-form>
          </a-modal>

          <a-button style="margin-right: 20px" type="primary" @click="showModal">编辑-面试信息</a-button>

        </div>
      </div>
      <div class="job">
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">职位-信息</a-divider>
        <a-descriptions :title="'岗位名称 : &nbsp&nbsp '+formState.jobTitle">
          <a-descriptions-item label="类型">{{ formState.jobType }}</a-descriptions-item>
          <a-descriptions-item label="薪资">{{ formState.jobSalary }} / {{ formState.jobSalaryType }}
          </a-descriptions-item>
          <a-descriptions-item label="地点">{{ formState.jobLocation }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="工作周期">
            {{ formState.jobStartDate }} -- {{ formState.jobEndDate }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="工作时间">
            {{ formState.jobWorkingHours }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="职位描述">
            {{ formState.jobDescription }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="职位要求">
            {{ formState.jobRequirements }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="resume">
        <div class="title">
          <h1 style="color: #4D7181;font-size: 30px">个人简历</h1>
          <div style="display: flex;float: right">
            <CopyOutlined class="icon" style="margin-right: 10px"/>
            <UserOutlined class="icon"/>
          </div>

        </div>
        <div class="content">
          <a-form
              ref="formRef"
              :model="formState"
          >
            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">基本信息</a-divider>
            <div class="basic">
              <div class="basicInfo">
                <a-form-item ref="resumeUsername" label="姓名" name="resumeUsername">
                  <a-input v-model:value="formState.resumeUsername" :disabled="true" style="width: 100px;"/>
                </a-form-item>
                <a-form-item ref="resumeAge" label="年龄" name="resumeAge">
                  <a-input-number v-model:value="formState.resumeAge" :disabled="true" style="width: 100px;"/>
                </a-form-item>
                <a-form-item ref="resumeGender" label="性别" name="resumeGender">
                  <a-select v-model:value="formState.resumeGender" :disabled="true" style="width: 100px;">
                    <a-select-option value="男">男</a-select-option>
                    <a-select-option value="女">女</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item ref="resumePhone" label="联系电话" name="resumePhone">
                  <a-input v-model:value="formState.resumePhone" :disabled="true" style="width: 300px;"/>
                </a-form-item>
                <a-form-item ref="resumeAddress" label="居住地址" name="resumeAddress">
                  <a-input v-model:value="formState.resumeAddress" :disabled="true" style="width: 300px;"/>
                </a-form-item>
              </div>
              <div class="update">
                <a-upload
                    :disabled="true"
                    :show-upload-list="false"
                    action="http://localhost:8080/image/upload"
                    class="avatar-uploader"
                    list-type="picture-card"
                    name="file"

                >
                  <img v-if="imageUrl" :src="imageUrl" alt="avatar" style="width: 120px; height: 150px;"/>
                  <div v-else>
                    <div class="ant-upload-text">上传照片</div>
                  </div>
                </a-upload>
              </div>
            </div>
            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">教育背景</a-divider>
            <div class="school">
              <a-form-item ref="resumeEducationSchool" label="学校名称" name="resumeEducationSchool">
                <a-input v-model:value="formState.resumeEducationSchool" :disabled="true" style="width: 180px; "/>
              </a-form-item>
              <a-form-item ref="resumeEducationMajor" label="所学专业" name="resumeEducationMajor"
                           style="margin-left: 50px">
                <a-input v-model:value="formState.resumeEducationMajor" :disabled="true" style="width: 180px; "/>
              </a-form-item>
            </div>
            <div class="school">
              <a-form-item ref="resumeEducationDegree" label="最高学历" name="resumeEducationDegree">
                <a-select v-model:value="formState.resumeEducationDegree" :disabled="true"
                          placeholder="请选择最高学历！"
                          style="width: 180px;">
                  <a-select-option value="大专">大专</a-select-option>
                  <a-select-option value="本科">本科</a-select-option>
                  <a-select-option value="硕士">硕士</a-select-option>
                  <a-select-option value="博士">博士</a-select-option>
                  <a-select-option value="其他">其他</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item ref="resumeEducationEndDate" label="毕业时间" name="resumeEducationEndDate"
                           style="margin-left: 50px">
                <a-date-picker v-model:value="formState.resumeEducationEndDate" :disabled="true"
                               style="width: 180px;"/>
              </a-form-item>
            </div>

            <div class="school">
              <a-form-item ref="resumeSchoolExperience" label="校园经历"
                           name="resumeSchoolExperience">
                <a-textarea v-model:value="formState.resumeSchoolExperience" :auto-size="{minRows: 4, maxRows: 10}"
                            :disabled="true"
                            :maxlength="300"
                            show-count
                            style="width: 600px"
                />
              </a-form-item>
            </div>

            <div class="school">
              <a-form-item ref="resumeCertificates" label="荣誉奖项"
                           name="resumeCertificates">
                <a-textarea v-model:value="formState.resumeCertificates" :auto-size="{minRows: 4, maxRows: 10}"
                            :disabled="true"
                            :maxlength="300"
                            show-count
                            style="width: 600px"
                />
              </a-form-item>
            </div>

            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">技能特长</a-divider>
            <div class="school">
              <a-form-item ref="resumeSkillDescription" label="技能特长"
                           name="resumeSkillDescription">
                <a-textarea v-model:value="formState.resumeSkillDescription" :auto-size="{minRows: 4, maxRows: 10}"
                            :disabled="true"
                            :maxlength="300"
                            show-count
                            style="width: 600px"
                />
              </a-form-item>
            </div>
            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">工作经历</a-divider>
            <div class="school">
              <a-form-item ref="resumeWorkExperience" label="工作经历"
                           name="resumeWorkExperience">
                <a-textarea v-model:value="formState.resumeWorkExperience" :auto-size="{minRows: 4, maxRows: 10}"
                            :disabled="true"
                            :maxlength="300"
                            show-count
                            style="width: 600px"
                />
              </a-form-item>
            </div>
            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">自我介绍</a-divider>
            <div class="school">
              <a-form-item ref="resumePersonalProfile" label="自我介绍"
                           name="resumePersonalProfile">
                <a-textarea v-model:value="formState.resumePersonalProfile" :auto-size="{minRows: 4, maxRows: 10}"
                            :disabled="true"
                            :maxlength="300"
                            show-count
                            style="width: 600px"
                />
              </a-form-item>
            </div>
            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">工作期望</a-divider>
            <div class="school">
              <a-form-item ref="resumeExpectedJob" label="期望职位" name="resumeExpectedJob">
                <a-input v-model:value="formState.resumeExpectedJob" :disabled="true" style="width: 180px; "/>
              </a-form-item>
              <a-form-item ref="resumeExpectedSalary" label="期望薪资" name="resumeExpectedSalary"
                           style="margin-left: 50px">
                <a-input-number v-model:value="formState.resumeExpectedSalary" :disabled="true"
                                style="width: 180px; "/>
              </a-form-item>

            </div>
            <div class="school">
              <a-form-item ref="resumeExpectedSalaryType" label="期望薪资类型" name="resumeExpectedSalaryType"
                           style="margin-left: 50px">
                <a-select v-model:value="formState.resumeExpectedSalaryType" :disabled="true" style="width: 100px;">
                  <a-select-option value="时薪">时薪</a-select-option>
                  <a-select-option value="日薪">日薪</a-select-option>
                  <a-select-option value="月薪">月薪</a-select-option>
                  <a-select-option value="均可">均可</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item ref="resumeExpectedWorkAddress" label="期望工作地点" name="resumeExpectedWorkAddress"
                           style="margin-left: 50px">
                <a-input v-model:value="formState.resumeExpectedWorkAddress" :disabled="true" style="width: 180px; "/>
              </a-form-item>
            </div>
          </a-form>


        </div>
      </div>
    </div>


  </div>
</template>

<style scoped>
.jobAndEmployerDetail {
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;

  .main {
    width: 100%;
    flex-grow: 1;
    height: 90%;
    overflow: auto; /* 内容超出时自动显示滚动条 */

    .job {
      margin: 0 20px 20px;
      border-radius: 10px;
      padding: 10px 30px 30px;
      border: 1px solid #ccc;
      height: auto;
      overflow: auto; /* 或者使用 overflow: hidden; */

      .check-button {
        display: flex;
        float: right;
      }
    }

    .resume {
      max-width: 900px;
      margin: 20px;
      padding: 20px 60px;
      border: 1px solid #ccc;
      border-radius: 10px; /* 你可以调整这个值来改变圆角的大小 */
      background-color: white;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon {
          font-size: 35px;
          padding: 15px;
          color: white;
          background-color: #C09E66;
          border-radius: 50px;
          margin-bottom: 10px;
        }
      }

      .content {
        border: 2px solid #4D7181;
        padding: 20px;
        border-top: 20px solid #4D7181;
        border-radius: 10px;

        .basic {
          display: flex;
          padding-left: 30px;
          justify-content: space-between;

          .basicInfo {
            width: 70%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap; /* 允许子元素换行 */
            gap: 0 30px; /* 设置水平间距为10px，垂直间距为0 */
          }

          .update {
            width: 120px;
            height: 150px;
            margin-right: 60px;
          }
        }

        .school {
          display: flex;
          padding-left: 30px;
        }
      }
    }
  }


}


</style>
